{extend name="base" /}

{block name="css"}
    <style type="text/css">
        .col-md-4{
            margin-bottom: 30px;
        }
    </style>
{/block}

{block name="main"}
{php}
    $list = explode(',',$one->pic);
{/php}
<div class="container" id="app">
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8 mb-lg-5">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    {volist name="list" id="v"}
                    <div class="carousel-item {eq name='i' value='1'}active{/eq}">
                        <img class="d-block w-100" src="{$v}" alt="First slide">
                    </div>
                    {/volist}
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-3">
            <div class="list-group">
                <a class="list-group-item list-group-item-action active" data-toggle="list" href="#list-hotel">Hotel</a>
                <a class="list-group-item list-group-item-action" data-toggle="list" href="#list-catering">Catering</a>
                <a class="list-group-item list-group-item-action" data-toggle="list" href="#list-activity">Activity</a>
                <a class="list-group-item list-group-item-action" data-toggle="list" href="#list-material">Material</a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="list-hotel">
                    <div class="row">
                        <div class="col-4 mb-lg-5" v-for="vo in one.hotels">
                            <div class="card">
                                <img class="card-img-top" height="180rem" :src="vo.pic" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">{{vo.name}}</h5>
                                    <p class="card-text">{{vo.desc}}</p>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">code : {{vo.code}}</li>
                                    <li class="list-group-item">num : {{vo.num}}</li>
                                </ul>
                                <div class="card-body" v-if="isLogin == 1">
                                    <a href="javascript:;" @click="addCart('/home/addcart/id/'+ vo.id + '/type/hotel')" class="card-link">add cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade show" id="list-catering">
                    <div class="row">
                        <div class="col-4 mb-lg-5" v-for="vo in one.caterings">
                            <div class="card">
                                <img class="card-img-top" height="180rem" :src="vo.pic" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">{{vo.name}}</h5>
                                    <p class="card-text">{{vo.desc}}</p>
                                </div>
                                <div class="card-body" v-if="isLogin == 1">
                                    <a href="javascript:;" @click="addCart('/home/addcart/id/'+ vo.id + '/type/catering')" class="card-link">add cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade show" id="list-activity">
                    <div class="row">
                        <div class="col-4 mb-lg-5" v-for="vo in one.activitys">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">{{vo.name}}</h5>
                                    <p class="card-text">{{vo.desc}}</p>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">{{vo.start}} ~ {{vo.end}}</li>
                                </ul>
                                <div class="card-body" v-if="isLogin == 1">
                                    <a href="javascript:;" @click="addCart('/home/addcart/id/'+ vo.id + '/type/activity')" class="card-link">add cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade show" id="list-material">
                    <div class="row">
                        <div class="col-4 mb-lg-5" v-for="vo in one.materials">
                            <div class="card">
                                <img class="card-img-top" height="180rem" :src="vo.pic" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="card-title">{{vo.name}}</h5>
                                    <p class="card-text">{{vo.desc}}</p>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">num : {{vo.num}}</li>
                                </ul>
                                <div class="card-body" v-if="isLogin == 1">
                                    <a href="javascript:;" @click="addCart('/home/addcart/id/'+ vo.id + '/type/material')" class="card-link">add cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}


{block name='js'}
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        methods: {
            addCart(url){
                axios.get(url)
                    .then(res=>{
                        alert(res.data.msg);
                    })
            }
        },
        mounted: function () {

        },
        data:{
            one: {:json_encode($one)},
            isLogin: {:is_login()?1:0}
        }
    });
</script>
{/block}